<template>
  <HeaderLayout title = '修改密码' :visibleMenu="false">
    <div class="back" slot='left' @click="handleBack"><Icon name = 'arrow-left' /></div>
    <div class='save' slot='right' @click="handleSave">保存</div>
    
    <CellGroup>
      <Field
        v-model = 'oldpassword'
        label = '原始密码'
        placeholder = '请输入原始密码'
        type = 'password'
        required
        clearable
      />
      <Field
        v-model = 'newpassword'
        label = '新密码'
        placeholder = '请输入新密码'
        type = 'password'
        required
        clearable
      />
      <Field
        v-model = 'renewpassword'
        label = '确认密码'
        placeholder = '请输入确认密码'
        type = 'password'
        required
        clearable
      />
    </CellGroup>
  </HeaderLayout>
</template>

<script>

import { Icon, Field, CellGroup, Toast } from 'vant'
import HeaderLayout from '@/layout/headerLayout/index.vue'

export default {

  name: 'index',

  data () {
    return {
      oldpassword: '',
      newpassword: '',
      renewpassword: ''
    }
  },

  methods: {
    handleBack: function () {
      this.$router.go(-1)
    },
    handleSave: function () {
      console.log('保存')

      const error = []

      if (!this.oldpassword) {
        error.push('请输入原始密码')
      }

      if (error.length) {
        Toast(error[0])

        return
      }
    }
  },

  components: {
    HeaderLayout,
    Icon,
    CellGroup,
    Field,
  },
}

</script>

<style lang="less" scoped>

.back {
  i {
    color: #fff;
  }
}

.save {
  padding-right: 10px;
}

</style>